<template>
    <view class="page">
        <view class="nav_box">
            <view class="nav_left_box" @click="goback"><u-icon name="arrow-left" color="#fff" size="36"></u-icon></view>
            <view class="nav_center_box">大王熔炼炉</view>
            <view class="nav_right_box"></view>
        </view>
        <view class="shuoming_box">
            <view class="guize_box" @click="rule">规则</view>
        </view>
        <swiper class="swiper" next-margin="220rpx" @change="swiperCurrent" previous-margin="220rpx" circular
            :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration" bg-color="background">
            <swiper-item v-for="(item, index) in list3" :key="index">
                <view :class="index == current ? 'swiper1-item' : 'swiper-item'"
                    :style="{ backgroundImage: 'url(' + item + ')' }">
                    <view class="swiper_image_box">
                        <image src="" mode="scaleToFill" />
                    </view>
                    <view class="swiper_name_pic_box">
                        <view class="name_box">产品</view>
                        <view class="prc_box">¥199.00</view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="line_box"></view>
        <view class="jilu_box">
            <view class="jiluanniu_box" @click="keep">
                记录
            </view>
        </view>
        <scroll-view scroll-y class="main_box">
            <view class="dange_box" v-for="item in 30">
                <view class="dange_top_box">
                    20/20
                </view>
                <view class="damhe_pic_box"></view>
            </view>
        </scroll-view>
        <view class="bottom_box">
            <view class="submit_box">进度百分比</view>
            <!-- 请选择进击物品 -->
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list3: [
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
                'https://new.qingfentool.vip/upload/image/20230822/d448d89a1b8d553dd558722a6a16e023.png',
            ],
            autoplay: true,
            interval: 2000,
            duration: 500,
            current: '',
        }
    },
    methods: {
        goback() {
            uni.navigateBack()
        },
        rule() {
            uni.navigateTo({
                url: '/userPage/user/agreement?id=' + 25
            });
        },
        keep() {
            uni.navigateTo({
                url: '/userPage/user/meltingrecord'
            });
        },
        swiperCurrent(e) {
            this.current = e.detail.current
        }

    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-image: url('https://new.qingfentool.vip/upload/image/20230822/8039d16bd94e6a30ea8e171ac588a883.png');
    background-size: 100% 100%;
    padding-top: 104rpx;

    .nav_box {
        width: 100%;
        height: 40rpx;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 76rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 38rpx;
        margin-bottom: 29rpx;

        .nav_left_box {
            width: 16rpx;
            height: 35rpx;
            line-height: 35rpx;
        }

        .nav_center_box {
            width: 200rpx;
            height: 35rpx;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 35rpx;
            text-align: center;
        }

        .nav_right_box {
            width: 16rpx;
            height: 29rpx;
        }
    }

    .shuoming_box {
        width: 100%;
        height: 30rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 60rpx;

        .guize_box {
            width: 100rpx;
            height: 30rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFF;
            text-align: right;
            line-height: 30rpx;

        }
    }

    .swiper {
        height: 420rpx;
        display: flex;
        align-items: center;


        .swiper-item {
            height: 340rpx;
            margin: 40rpx 5rpx;
            background-size: 100% 100%;
            padding-top: 20%;

            .swiper_image_box {
                width: 150rpx;
                height: 150rpx;
                background: #FFFFFF;
                margin-left: 26%;
                margin-bottom: 3%;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .swiper_name_pic_box {
                width: 70%;
                height: 70rpx;
                margin: auto;

                .name_box {
                    width: 100%;
                    height: 25rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E26C00;
                    line-height: 25rpx;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 18rpx;
                }

                .prc_box {
                    width: 100%;
                    height: 30rpx;
                    font-size: 30rpx;
                    font-family: PingFang SC;
                    font-weight: 700;
                    color: #FFA600;
                    line-height: 30rpx;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    -webkit-text-stroke: 1rpx #790000;
                }
            }
        }

        .swiper1-item {
            height: 380rpx;
            margin: 20rpx 5rpx;
            background-size: 100% 100%;
            padding-top: 20%;

            .swiper_image_box {
                width: 180rpx;
                height: 180rpx;
                background: #FFFFFF;
                margin-left: 22%;
                margin-bottom: 4%;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .swiper_name_pic_box {
                width: 70%;
                height: 70rpx;
                margin: auto;

                .name_box {
                    width: 100%;
                    height: 25rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E26C00;
                    line-height: 25rpx;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 18rpx;
                }

                .prc_box {
                    width: 100%;
                    height: 30rpx;
                    font-size: 30rpx;
                    font-family: PingFang SC;
                    font-weight: 700;
                    color: #FFA600;
                    line-height: 30rpx;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    -webkit-text-stroke: 1rpx #790000;
                }
            }
        }
    }

    .line_box {
        width: 100%;
        height: 14rpx;
        background-image: url('https://new.qingfentool.vip/upload/image/20230822/0c8336b82869b00c529df282ebf7a256.png');
        background-size: 100% 100%;
        margin-bottom: 17rpx;
    }

    .jilu_box {
        width: 100%;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 19rpx;
        margin-bottom: 28rpx;

        .jiluanniu_box {
            width: 158rpx;
            height: 46rpx;
            background-image: url('https://new.qingfentool.vip/upload/image/20230822/479c08d11a28ca7fb7ae287020986d94.png');
            background-size: 100% 100%;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 46rpx;
            text-align: center;
            text-shadow: 0rpx 3rpx 2rpx rgba(138, 70, 25, 0.35);

        }
    }

    .main_box {
        width: 710rpx;
        height: calc(100vh - 910rpx);
        margin: auto;
        padding-left: 16rpx;
        overflow-x: hidden;
        overflow: auto;

        .dange_box {
            width: 160rpx;
            height: 200rpx;
            background: #E2BD99;
            border: 1rpx solid #C36249;
            border-radius: 10rpx;
            float: left;
            margin-right: 18rpx;
            margin-bottom: 20rpx;
            padding-top: 2rpx;

            .dange_top_box {
                width: 132rpx;
                height: 38rpx;
                background-image: url('https://new.qingfentool.vip/upload/image/20230822/223b42a7c8908872ed9fd4f9ca15ac7e.png');
                background-size: 100% 100%;
                font-size: 22rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #AF8E6E;
                line-height: 38rpx;
                padding-left: 10rpx;
                margin-bottom: 10rpx;
            }

            .damhe_pic_box {
                width: 120rpx;
                height: 120rpx;
                background: #FFFFFF;
                opacity: 0.5;
                margin: auto;
            }
        }
    }

    ::-webkit-scrollbar {
        /* 隐藏滚动条 */
        display: none;
    }

    .bottom_box {
        width: 100%;
        height: 198rpx;
        background: #262626;
        position: fixed;
        bottom: 0;
        padding-top: 20rpx;

        .submit_box {
            width: 690rpx;
            height: 98rpx;
            border-radius: 49rpx;
            margin: auto;
            background-image: url('https://new.qingfentool.vip/upload/image/20230822/59d464e69f4830a3975ad51cd75c0179.png');
            background-size: 100% 100%;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFC6;
            text-align: center;
            line-height: 98rpx;
        }
    }
}
</style>